<template>
	<view class="wx_nav">
		<view class="nav">
			<!-- #ifndef MP-WEIXIN -->
			<u-search class="top_search" placeholder="日照香炉生紫烟" v-model="search" @blur="getproduct"></u-search>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<scroll-view class="scroll_content" scroll-x="true" ref="mydom">
				<view class="scroll_item" v-for="(item,index) in categoryList" :key="item.category_id"
					@tap="changeScroll(item.category_id)">
					<text :class='selectitem === item.category_id ?"f-active-color":"f-color"'>{{item.category_name}}</text>
				</view>
			</scroll-view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="uni-form-item uni-column search">
				<view class="iconfont icon-sousuo"></view>
				<input class="uni-input" focus placeholder="搜索您要的商品" v-model="search" @blur="getproduct"/>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<scroll-view class="scroll_content" scroll-x="true" ref="mydom" :style="`Top:`+nabheight+`rpx;`">
				<view class="scroll_item" v-for="(item,index) in categoryList" :key="item.category_id"
					@tap="changeScroll(item.category_id)">
					<text :class='selectitem === item.category_id ?"f-active-color":"f-color"'>{{item.category_name}}</text>
				</view>
			</scroll-view>
			<!-- #endif -->
		</view>
		<CommodityList :productList="product"></CommodityList>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import CommodityList from '@/components/commoditylist.vue'
	export default {
		components: {
			CommodityList
		},
		data() {
			return {
				selectitem: 0,
				categoryList: "", //分类列表
				categoryID: [], // 分类id
				product: [], // 商品列表
				productList: "",
				total: 0, // 商品总量
				pageSize: 7, // 每页显示的商品数量
				currentPage: 1, //当前页码
				activeName: "-1", // 分类列表当前选中的id
				search: "", // 搜索条件
				nabheight: 0,
				navheight: 0,
				status: 'loading',
				newproduct:[]
				
			}
		},
		watch: {
			search: function(val) {
				if (val != "") {
					this.getproduct(val);
				}
			},
			// categoryID: function() {
			// 	this.getData();
			// 	this.search = "";
			// },
		},
		onLoad() {
			this.getCategory(),
				this.getData()

		},
		onShow() {
			this.getbarheight()
			// this.changescroll(),
		},
		onReachBottom() {
			this.status = 'more';
			this.loadMoreFunc();
		},
		methods: {
			//获取选中的商品分类id
			changeScroll(id) {
				this.selectitem = id;
				this.categoryID=[];
				this.reproduct=[];
				this.currentPage=1;
				this.pageSize=7;
				if(id==0){
					this.categoryID=[];
					this.$nextTick(function(){
						this.currentPage=1;
						this.pageSize=7;
						this.getData1()
					})
					}else{
						this.categoryID=id;
						this.$nextTick(function(){
							this.getData1()
							this.categoryID=[];
						})
						// console.log(this.categoryID)
					
					}
					
					console.log(this.categoryID)
					
				
				// this.selectitem = id;
				// this.categoryID=id;
				// if(id==0){
				// 	this.categoryID=[];
				// }
				// this.$nextTick(function(){
				// 	console.log(this.categoryID)
				// 	this.getData1()
				// })
				
				
				
			},
			//获取商品分类
			getCategory() {
				this.$request
					.post("/product/getCategory", {})
					.then(res => {
						const val = {
							category_id: 0,
							category_name: "全部"
						};
						const cate = res.data.category;
						cate.unshift(val);
						this.categoryList = cate;
						console.log(this.categoryList)
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 向后端请求全部商品或分类商品数据
			getData() {
				const _self = this
				// 如果分类列表为空则请求全部商品数据，否则请求分类商品数据
				const api =
					this.categoryID.length == 0 ?
					"/product/getAllProduct" :
					"/product/getProductByCategory";
				this.$request
					.post(api, {
						categoryID: this.categoryID,
						currentPage: this.currentPage,
						pageSize: this.pageSize
					})
					.then(res => {
						const reproduct = [];
						reproduct.push(res.data.Product);
						this.$nextTick(function() {
							console.log(reproduct)
							reproduct[0].map(item => {
								this.newproduct.push(item);
								// console.log(this.product)
							})
						})
						this.product=this.newproduct
						this.total = res.data.total;
						// console.log(this.total)
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			getbarheight() {
				// #ifdef MP-WEIXIN
				const _self = this;
				uni.getSystemInfo({
					success: res => {
						console.log(res)
						this.system = res
					}
				})
				//获取胶囊信息
				this.menu = uni.getMenuButtonBoundingClientRect()
				this.systemBar = this.system.statusBarHeight //状态栏高度
				this.navigationBar = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height //胶囊高度
				this.$nextTick(function() {
					this.nabheight = (this.navigationBar) * 2 + this.systemBar;
					this.navheight = this.navigationBar;
					console.log(this.navheight)
				})

				// #endif
			},
			getproduct() {
				this.$request
					.post("/product/getProductBySearch", {
						search: this.search,
						currentPage: this.currentPage,
						pageSize: this.pageSize
					})
					.then(res => {
						this.product = res.data.Product;
						this.total = res.data.total;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			}
			,getData1() {
			      // 如果分类列表为空则请求全部商品数据，否则请求分类商品数据
			      const api =
			        this.categoryID.length == 0
			          ? "/product/getAllProduct"
			          : "/product/getProductByCategory";
			      this.$request
			        .post(api, {
			          categoryID: this.categoryID,
			          currentPage: this.currentPage,
			          pageSize: this.pageSize
			        })
			        .then(res => {
			          this.product = res.data.Product;
			          this.total = res.data.total;
			        })
			        .catch(err => {
			          return Promise.reject(err);
			        });
			    },
		},
		onReachBottom() {
			this.currentPage += 1;
			if (this.currentPage >= this.total/5-1) {
				return this.status = '没有更多了';
			}
			const timer = setTimeout(() => {
				clearTimeout(timer);
				this.getData();
			}, 2000)

		}
	}
</script>

<style>
	.nav {
		/* 		display: flex;
		flex-direction: column; */
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: white;
		width: 100%;
		height: 200rpx;
		/* #ifndef MP-WEIXIN */
		align-items: center;
		/* #endif */
		/* 		background: rgba(255, 255, 255, 0.2);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px); */
	}

	.search {
		display: flex;
		width: 400rpx;
		height: 150rpx;
		/* 		position: absolute; */
		top: 0;
		padding-left: 30rpx;
		font-size: 40rpx;
		/* margin-top: -15rpx; */
		background-color: white;
	}

	.icon-sousuo {
		position: absolute;
		top: 65rpx;
	}

	/deep/.uni-input {
		height: 0rpx;
		margin-left: 20rpx;
	}

	/deep/.u-search__content {
		margin-left: 80rpx;
	}

	.top_search {

		/* #ifndef MP-WEIXIN */
		padding-top: 20rpx;
		width: 700rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		position: absolute;
		/* 		left: 30rpx;
		top: 200rpx; */
		margin-top: 100rpx;
		width: 400rpx;
		height: 100rpx;
		/* #endif */

		/* 	position: absolute; */
	}

	.scroll_content {
		/* 		position: sticky; */
		position: absolute;
		/* 	top: 0rpx; */
		width: 100%;
		height: 100rpx;
		white-space: nowrap;
		background-color: white;
		z-index: 999;
		line-height: 100rpx;
	}

	.scroll_item {
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 32rpx;
	}

	.f-active-color {
		padding: 10rpx 0;
		border-bottom: 6rpx solid #49BDFB;
	}

	.wx_nav {
		width: 100%;
		position: relative;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		/* 		height: 200rpx;
		line-height: 200rpx;
		text-align: center; */
	}
</style>
